import React from "react";
import { User } from "types/user";
interface SearchProps {
  users: User[];
  params: {
    personId: string;
    name: string;
  };
  setParams: (param: SearchProps["params"]) => void;
}
export const SearchPannel = (props: SearchProps) => {
  const { setParams, users, params } = props;
  return (
    <div className="search-pannel">
      <form>
        <label>
          <input
            value={params.name}
            onChange={(evt) =>
              setParams(
                Object.assign({}, params, {
                  name: evt.target.value,
                })
              )
            }
            placeholder="项目名"
            type="text"
          />
        </label>
        <label>
          <select
            value={params.personId}
            onChange={(evt) =>
              setParams(
                Object.assign({}, params, {
                  personId: evt.target.value,
                })
              )
            }
          >
            <option value="">负责人</option>
            {users.map((user: any) => {
              return (
                <option key={user.id} value={user.id}>
                  {user.name}
                </option>
              );
            })}
          </select>
        </label>
      </form>
    </div>
  );
};
